<template>
  <li>
    <div class="pic" @click="jumpDetail(item.id)">
      <!-- <div class="pic-img">
        <img class="auto-img" :src="item.picUrl" :alt="item.name" />
      </div> -->
      <img :src="item.picUrl" :alt="item.name" />
      <div class="corner">
        <svg
          width="14"
          height="14"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 22 20"
        >
          <path
            fill-rule="evenodd"
            fill="#040000"
            d="M22 16.777c0 1.233-1.121 2.233-2.506 2.233-1.384 0-2.506-1-2.506-2.233v-2.553c0-1.234 1.122-2.233 2.506-2.233.174 0 .343.017.506.046v-1.37h-.033c.017-.22.033-.441.033-.666a8 8 0 0 0-16 0c0 .225.016.446.034.666H4v1.37c.163-.029.333-.046.505-.046 1.384 0 2.506.999 2.506 2.233v2.553c0 1.233-1.122 2.233-2.506 2.233S2 18.011 2 16.777v-2.553c0-.258.059-.501.148-.73A.982.982 0 0 1 2 13.001v-2.667c0-.023.012-.043.013-.067-.004-.088-.013-.176-.013-.266 0-5.523 4.477-10 10-10s10 4.477 10 10c0 .09-.009.178-.014.266.002.024.014.044.014.067v2a.988.988 0 0 1-.36.753c.224.334.36.72.36 1.138v2.552"
            opacity=".15"
          />
          <path
            fill-rule="evenodd"
            fill="#fff"
            d="M20 16.777c0 1.233-1.121 2.233-2.506 2.233-1.384 0-2.506-1-2.506-2.233v-2.553c0-1.234 1.122-2.233 2.506-2.233.174 0 .343.017.506.046v-1.37h-.033c.017-.22.033-.441.033-.666a8 8 0 0 0-16 0c0 .225.016.446.034.666H2v1.37c.163-.029.333-.046.505-.046 1.384 0 2.506.999 2.506 2.233v2.553c0 1.233-1.122 2.233-2.506 2.233S0 18.011 0 16.777v-2.553c0-.258.059-.501.148-.73A.982.982 0 0 1 0 13.001v-2.667c0-.023.012-.043.013-.067-.004-.088-.013-.176-.013-.266 0-5.523 4.477-10 10-10s10 4.477 10 10c0 .09-.009.178-.014.266.002.024.014.044.014.067v2a.988.988 0 0 1-.36.753c.224.334.36.72.36 1.138v2.552"
          />
        </svg>
        <span>{{ count(item.playCount) }}</span>
      </div>
    </div>
    <h4>{{ item.name }}</h4>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods: {
    jumpDetail(id) {
      this.$router.push({
        path: "/listdetail",
        query: {
          id,
        },
      });
    },
    count(num) {
      if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      } else {
        return num;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.auto-img {
  display: block;
  width: 100%;
  height: auto;
}
a {
  display: flex;
  flex-wrap: wrap;
  color: #2c3e50;
  text-decoration: none;
}
li {
  // display: flex;
  text-align: left;
  margin-bottom: 15px;
  h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 5px;
    font-size: 12px;
    // line-height: 32px;
  }
}
.pic {
  position: relative;
  // .pic-img{
  //   width:32.8vw;
  //   height: 32.8vw;
  // }
  .corner {
    display: flex;
    position: absolute;
    right: 5px;
    top: 5px;
  }
  span {
    color: #e4ead6;
    font-size: 12px;
  }
}
</style>